<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="/web/js/global/global_header.js"></script>
    <title>华锐Pms</title>
</head>
<style>
    .login {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        height: 100%;
        background-color: #f0f0f0;
    }

    .login-form {
        border-radius: 6px;
        background: #fff;
        width: 300px;
        padding: 25px 25px 5px 25px;
    }

    .title {
        margin: 0 auto 30px auto;
        text-align: center;
        color: #707070;
    }

    .login-form .el-input,
    .login-form .el-input input {
        height: 38px;
    }

    .tipsBox {
        text-align: center;
    }

    .tipsBox h1 {
        font-size: 25px;
    }

    .tipsBox h2 {
        font-size: 18px;
    }

    .tipsBox .smTitle {
        margin-top: 15px;
    }

    .el-dialog {
        border-radius: 10px;
        margin-top: 0 !important;
        top: 50%;
        transform: translateY(-50%);
    }

    .el-dialog__header {
        padding: 0;
    }

    .el-dialog__wrapper .el-dialog__body {
        padding: 60px 20px;
    }
</style>

<body>
    <div id="app" style="height: 100%;">
        <div class="login">
            <el-form :model="ruleForm" status-icon :rules="loginRules" ref="ruleForm" class="login-form">
                <h3 class="title">华锐PMS管理系统</h3>
                <el-form-item prop="userName">
                    <el-input type="text" v-model="ruleForm.userName" autocomplete="off" placeholder="账号"
                        prefix-icon="el-icon-user-solid"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="密码"
                        prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button :loading="loading" size="medium" type="primary" style="width:100%;"
                        @click.native.prevent="submitForm('ruleForm')">
                        <span v-if="!loading">登 录</span>
                        <span v-else>登 录 中...</span>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>
        <el-dialog :visible.sync="dialogVisible" width="30%" :show-close="false">
            <div class="tipsBox">
                <h1 class="tx-bl ">账号登录成功</h1>
                <h2 class="tx-gr smTitle">正在进入系统</h2>
            </div>

        </el-dialog>
    </div>
    <script type="text/babel">

        window.vm = new Vue({
            el: '#app',
            data() {
                return {
                    dialogVisible: false,
                    loading: false,
                    ruleForm: {
                        userName: '',
                        password: '',
                    },
                    loginRules: {
                        userName: [
                            { required: true, trigger: "blur", message: "请输入您的账号" }
                        ],
                        password: [
                            { required: true, trigger: "blur", message: "请输入您的密码" }
                        ],
                        code: [{ required: true, trigger: "change", message: "请输入验证码" }]
                    },
                };
            },
            created() {
            },
            methods: {
                submitForm(formName) {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            this.loading = true;
                            this.POST({ url: top.Config.curUrl + "/pmsLogin", map: this.ruleForm }).then((res) => {
                                setTimeout(() => {
                                    if (res.result && res.result.hasOwnProperty('hotel')) {
                                        localStorage['hotel'] = JSON.stringify(res.result.hotel);
                                    }
                                    if (res.retcode != 200) { //如果返回码不是200则提示错误登录信息
                                        this.msgError(res.retmsg)
                                        this.loading = false;
                                    } else { //如果返回码是200则登录成功
                                        this.dialogVisible = true;
                                        setTimeout(() => { //延时1秒打开页面
                                            Pms.setToken(res.result.token); //将返回的token存入本地储存
                                            this.dialogVisible = false;
                                            top.location.href = this.homeUrlPc;
                                            this.loading = false;
                                        }, 1500)
                                    }
                                }, 1000);
                            })
                        }
                    });
                },
            }
        })
    </script>
</body>

</html>